<template>
  <div>
    <div class="header">
      <div>ID : 1806 </div>
      <div class="header_onLine">在线 </div>
    </div>
    <div class="content">
      <div class="content_icon"> 123</div>
      <div >
        <div>固件标识：51071253637534D4DF365</div>
        <div>设备类型：回收机</div>
        <div>经纬度：116.397428, 39.90923</div>
      </div>
      <div >
        <div>固件版本：Y4.8</div>
        <div>设备状态：回收机</div>
        <div>所属场地：带湖花城</div>
      </div>
      <div >
        <div>APP版本：2.1.171</div>
        <div>联系电话:4006868272</div>
        <div>设备地址：</div>
      </div>
      <div >
        <div>投放时间:20231111</div>
        <div>GPS终端号</div>
        <div>设备名称：</div>
      </div>
    </div>
    <div class="count">
      <div class="count_box">
        <div class="count_icon">|</div>
        <div  class="count_number">
          <div>548</div>
          <div>总注册用户数</div>
        </div>
        <div  class="count_number">
          <div>3</div>
          <div>上月注册用户数</div>
        </div>
        <div  class="count_number">
          <div>4</div>
          <div>本月注册用户数</div>
        </div>
      </div>
      <div class="count_box">
        <div class="count_icon">|</div>
        <div class="count_number">
          <div>4</div>
          <div>机箱个数</div>
        </div>
        <div  class="count_number">
          <div>0</div>
          <div>溢满箱个数</div>
        </div>
      </div>
    </div>
    <div style="background-color:#eee;width: 100%;height: 10px;"></div>
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="机器机箱" name="first">
          <div class="machine">
            <div class="machine_circle">
              <span>41%</span>
            </div>
            <div style="margin-top: 140px;">
              <span class="machine_tag">饮料瓶</span>
              <span class="machine_tag">有害垃圾</span>
              <span class="machine_tag">饮料瓶</span>
            </div>
            <div style="margin:8px;">当前重量：0.052kg</div>
            <div style="margin:8px;">2023-03-14 14:07:02</div>
            <div class="machine_bottom">
              <div class="machine_two">

                <div style="border-right: solid 1px red;flex:1;">修改</div>
                <div style="flex:1;background-color:red;">删除</div>
              </div>
            </div>
          </div>
          <div class="machine">
            <div class="machine_add">
              <i class="el-icon-plus" style="color:#999999;font-size:45px;font-weight: 700"></i>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="回收记录" name="second">
         <div>
           <el-date-picker
             v-model="value1"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
           <el-button style="margin-left: 10px;" type="primary">查找</el-button>
           <el-button type="primary">手工录入</el-button>
           <el-button type="primary">导出报表</el-button>
         </div>
          <div style="margin: 10px 0;">
            <span class="distance">饮料瓶：65395个</span>
            <span class="distance">纸类</span>
            <span class="distance">纺织物</span>
            <span class="distance">金属</span>
            <span class="distance">塑料</span>
            <span class="distance">有害垃圾</span>
            <span class="distance">纸类②</span>
          </div>
          <el-table
            style="width: 100%">
            <el-table-column  prop="date" label="回收员名称"  ></el-table-column>
            <el-table-column  prop="date" label="回收员类别"  ></el-table-column>
            <el-table-column  prop="date" label="回收明细"  ></el-table-column>
            <el-table-column  prop="date" label="备注"  ></el-table-column>
            <el-table-column  prop="date" label="回收价（元）"  ></el-table-column>
            <el-table-column  prop="date" label="联系电话"  ></el-table-column>
            <el-table-column  prop="date" label="清空时间"  ></el-table-column>
            <el-table-column  prop="date" label="登录方式"  ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="投递记录" name="third">
          <div>
            <el-select style="width: 200px;margin-right: 10px;" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input style="width: 200px;margin-right: 10px;"   placeholder="请输入用户昵称"></el-input>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button style="margin-left: 10px;" type="primary">查找</el-button>
            <el-button type="primary">手工录入</el-button>
            <el-button type="primary">导出报表</el-button>
          </div>
          <div style="margin: 10px 0;">
            <span class="distance">饮料瓶：65395个</span>
            <span class="distance">纸类</span>
            <span class="distance">纺织物</span>
            <span class="distance">金属</span>
            <span class="distance">塑料</span>
            <span class="distance">有害垃圾</span>
            <span class="distance">纸类②</span>
          </div>
          <el-table
            style="width: 100%">
            <el-table-column  prop="date" label="用户ID"  ></el-table-column>
            <el-table-column  prop="date" label="用户昵称"  ></el-table-column>
            <el-table-column  prop="date" label="投递明细"  ></el-table-column>
            <el-table-column  prop="date" label="备注"  ></el-table-column>
            <el-table-column  prop="date" label="状态"  ></el-table-column>
            <el-table-column  prop="date" label="投递时间"  ></el-table-column>
            <el-table-column  prop="date" label="获得积分"  ></el-table-column>
            <el-table-column  prop="date" label="金额"  ></el-table-column>
            <el-table-column  prop="date" label="评分"  ></el-table-column>
            <el-table-column  prop="date" label="登录方式"  ></el-table-column>
            <el-table-column  prop="date" label="操作"  ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="广告管理" name="fourth">广告管理</el-tab-pane>
        <el-tab-pane label="货道管理" name="five">货道管理</el-tab-pane>
      </el-tabs>

    </div>
  </div>

</template>

<script>
export default {
  name: "agentdeviceDetails",
  data(){
    return {
      activeName: 'first',
      value1:'',
      options:'',
    }
  },
  methods:{
    handleClick(){},
  }
}
</script>

<style scoped>
.header{
  padding: 10px;
  display: flex;
  height: 50px;
  align-items: center;
}
.header_onLine{
  width: 40px;
  background-color: #1ab394;
  text-align: center;
  margin-left: 10px;
}

.content{
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
}
.content_icon{
  width: 80px;
  height: 80px;
  background-color: #2e84e5;
  text-align: center;
  line-height: 80px;
  margin: 20px 0 0 20px;
  border-radius: 8px;
  color: #fff;
}
.count{
  border-top: solid 1px #eee;
  padding: 10px  10px 10px 30px;
  display: flex;

}
.count_box{
  flex: 1;
  display: flex;
  height: 80px;
  text-align: center;
  align-items: center;
  /*background-color: burlywood;*/
}
.count_icon{
  font-size: 60px;
  color: #2e84e5;
}
.count_number{
  width: 180px;
  /*background-color: red;*/
}
.count_number :first-child{
  margin-top: 5px;
  margin-bottom: 12px;
  color: #2e84e5;
  font-size: 25px;
}
.tab{
  margin-top: 10px;
  padding: 0 20px;
}
.machine{
  float: left;
  width: 250px;
  height: 300px;
  border: solid 1px #eee;
  text-align: center;
  position: relative;
  margin-right: 15px;
}
.machine_circle{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid 1px #2e84e5;
  text-align: center;
  line-height: 100px;
}
.machine_tag{
  display: inline-block;
  height: 30px;
  min-width: 50px;
  padding: 5px 10px;
  font-size: 12px;
  border: solid 1px #eee;
  color: #737b8a;
  background-color: #f7f7f7;
  margin-right: 5px;
}
.machine_bottom{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color:#2e84e5;
}
.machine_two{
  display: flex;
  justify-content: space-evenly;
}
.machine_add{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
/*距离*/
.distance{
  margin-right: 10px;
}
</style>
